VChart 2.0.19
Tutorials
Contributing
Options
API
FAQ
Themes 🌼
Changelogs
Online Customization
Playground
VChart Story Teller

Not only an out-of-the-box multi-terminal chart library, but also a vivid and flexible data storyteller.

VTable Checkered Artist

Not only a high-performance multi-dimensional data analysis form, but also a grid artist created between rows and columns.

VGrammar Data Magician

It is not only a visual grammar that generates thousands of charts, but also a data magician who turns boring into magic.

VRender Visual Rendering

Not only a visual rendering engine with rich functions, but also a handy pen.

VMind Smart Visualization Suit

Not just automatic, but also fantastic.

VStory Data Story Framework

Intelligent visual storytelling, data story creation framework.

VSeed Data Seed

VSeed, an elegant data composer, transforming complexity into simplicity.

!!!###!!!title=45-How to control the display order of stacking and legends and add display of total information on the tooltip——VisActor/VChart FAQ documents!!!###!!!

How to control the display order of stacking and legends and add display of total information on the tooltip

Problem Description

For the stacked area chart, I want to control the order of stacking. For example, I want the area chart to be stacked in the order of "China", "USA", "EU", "Africa" from bottom to top, and then the display order of the legend also follows " China", "USA", "EU", "Africa" are displayed in order from left to right, and when hovering up, the tooltip can display the total information, as shown in the following figure:

solution

This can be configured very simply on VChart, which only requires two steps:

  • Control the stacking order by configuring domain and sortIndex for the grouping field on the data.fields property
    • domain to declare the order
    • sortIndex declared as 0 means sorting in domain order

Because the order of the legend is displayed in the order of field domain declaration by default, the legend does not need to be configured here.

  • By configuring updateContent for tooltip.dimension, you can dynamically add the required information to the tooltip content, and you can also get all the information displayed by the current tooltip.

Code Example

Result display

Online effect reference: https://codepen.io/Sima/pen/WNLxdyg

Stacked area chart demo: https://www.visactor.io/vchart/demo/area-chart/stacked-area

Area chart tutorial: https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Types/Area

Data configuration tutorial: https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Data/Data_Types_and_Interface

Tooltip configuration tutorial: https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Tooltip

Data field configuration: https://www.visactor.io/vchart/option/areaChart#data(IDataType%7CIDataType%5B%5D).IDataValues.fields

Tooltip configuration item: https://www.visactor.io/vchart/option/areaChart#tooltip.visible

github: https://github.com/VisActor/VChart